<!--
 * @Author: 钱合明
 * @Date: 2022-06-01 15:08:00
 * @LastEditors: 钱合明
 * @LastEditTime: 2022-07-30 17:16:43
 * @FilePath: \dengta-frontend-project\frontend\src\pages\weChart\chat\menu\index.vue
 * @Description:
 * 18156516639
 * Copyright (c) 2022 by 钱合明/邻医快药, All Rights Reserved.
-->
<template>
    <div class="menu">
        <div class="wechat-menu i-scrollbar">
<!--            <div style="height: 0; font-size: 0;">{{unReadObj}}</div>-->
            <div @click="selectWechat(item)" @dblclick="handleToNotRead(item)" class="menu-item"
                 :class="{ active: currentConversationId === item.wechatid }" v-for="(item, index) in wechatList"
                 :key="item.id + index">
                <Badge class-name="badge" overflow-count="1000" :count="unReadObj[item.wechatid] || 0">
                    <img class="avatar" v-if="item.avatar==''" src="./../../../../assets/images/avaters.png" alt />
                    <img class="avatar" v-else v-lazy="item.avatar" alt>
                </Badge>
                <div class="name">{{ item.wechatno ? item.wechatno : item.wechatid }}<br />
                    {{ item.realname }}
                </div>
                <Badge :status="item.isonline === '0' ? 'success' : 'error'"></Badge>
            </div>
        </div>
        <div @click="handleUpdataConversion(0)" class="update-conversion">更新数据</div>
    </div>
</template>

<script>
import { WechatFriendList } from '@api/chat';
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
import base64 from '@/libs/base64.js';
import util from '@/libs/util';
import dayjs from 'dayjs';

export default {
    data() {
        return {
        };
    },
    computed: {
        ...mapState('chatwebsocket/wechat', ['websocketLogin', 'currentConversationId', 'unReadObj', 'wechatList', 'conversionLoading']),
    },
    mounted() {
        this.initWeiliaoData();
        if (this.currentConversationId) {
            this.getFriendList(this.currentConversationId);
        }
    },
    methods: {
        ...mapMutations('chatwebsocket/wechat', ['setRealname','setCurrentConversationId', 'setCurrentFriend', 'clearnChatMessages', 'setCovPage', 'setWechatList', 'setLoadingLock', 'setConversionLoading', 'setShowDetail', 'SET_CURRENT_CONVERS']),
        ...mapActions('chatwebsocket/wechat', ['setCurrentCoversation', 'setCurrentWechat', 'setCurrentWechatGroupName', 'initWeiliaoData']),
        // 选择一个微信。并展示其会话
        selectWechat(e) {
            if (this.currentConversationId === e.wechatid) {
                return;
            }
            if (e.isonline === '1') {
                this.$Message.error('当前微信不在线，请选择其他微信');
                return;
            }
            if (this.conversionLoading) {
                this.$Message.error('请勿频繁操作');
                return;
            }

            // 1.建立通道
            let msg = {
                Id: 1010,
                AccessToken: '',
                MsgType: 'DeviceAuthReq',
                Content: {
                    AuthType: 2,
                    Credential: base64.b64EncodeUnicode(e.wechatid)
                }
            };
            this.$websocket.sendSock(msg);

            // 关闭右侧详情
            this.setShowDetail(false);
            // 设置当前的选中的微信ID
            this.setCurrentConversationId(e.wechatid);
            // 保存当前选中的微信信息
            this.setCurrentWechat(e);

            // 清空筛选
            this.$emit('clearSearchKey');
            // 清空当前选中好友
            // 清空好友列表
            this.setCurrentFriend({});
            this.setCurrentCoversation([]);
            // 清空当前聊天内容
            this.clearnChatMessages();
            // 清空选中好友分组
            this.setCurrentWechatGroupName('');

            // 获取中间好友分组列表
            if (util.cookies.get(this.currentConversationId) !== undefined) {
                this.getFriendList(e.wechatid);
            } else {
                let randomTime = 86400 + parseInt(Math.random() * 1000);
                util.cookies.set(this.currentConversationId, 1, {
                    expires : new Date(dayjs().add(randomTime, 'second').format('YYYY-MM-DD HH:mm:ss'))
                });
                this.handleUpdataConversion(randomTime);
            }
        },
        // 获取中间好友分组列表
        getFriendList(wechatid, keywords = '', is_unreply = 0) {
            this.setConversionLoading(true);
            WechatFriendList({
                wechat_id: wechatid,
                keywords: keywords,
                is_unreply: is_unreply,
            }).then(res => {
                setTimeout(() => {
                    this.setConversionLoading(false);
                }, 500);
                this.setCurrentCoversation(res.list);
            }).catch(error => {
                this.setConversionLoading(false);
            });
        },
        getConversation(id, taskId) {
            let msgs = {
                MsgType: 'TriggerConversationPushTask',
                Content: {
                    WeChatId: id,
                    StartTime: 0,
                    WithName: true,
                    TaskId: taskId,// =0手动更新 >0一天更新一次
                }
            };
            this.$websocket.sendSock(msgs);
        },
        // 重新请求全量数据
        handleUpdataConversion(time = 0) {
            if (!this.currentConversationId) {
                return;
            }

            this.setCovPage(0);
            this.clearnChatMessages();
            // 清空当前用户
            this.setCurrentFriend({});
            this.setCurrentCoversation([]);
            // 设置loading
            this.setConversionLoading(true);
            this.getConversation(this.currentConversationId, time);
        },
        handleToNotRead(item) {
            // 双击跳转到未读的位置
            // if (this.unReadObj[item.wechatid] && this.unReadObj[item.wechatid] > 0) {
            //     this.$emit('scrollToUnread', item);
            // }
        }
    }
};
</script>

<style lang="less" scoped>
.menu {
    height: 100%;
    width: 100%;
    background: #333;

    .update-conversion {
        height: 26px;
        line-height: 26px;
        width: 100%;
        text-align: center;
        cursor: pointer;
        color: #999;
        position: absolute;
        bottom: 0px;
    }

    .wechat-menu {
        height: calc(~ '100% - 21px');
        overflow: auto;
        width: 180px;

        .menu-item {
            margin: 15px 0 15px 10px;
            display: flex;
            color: #777;

            /deep/.ivu-badge {
                height: 42px;
            }

            .avatar {
                margin-right: 5px;
                width: 42px;
                height: 42px;
                border-radius: 5px;
                cursor: pointer;
            }

            .name {
                width: 100%;
                margin-right: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            &.active {
                border-right: 3px solid #409eff;
            }
        }
    }
}
</style>

<style>
.badge {
    border: none !important;
    right: 15px !important;
}
</style>
